<template>
  <BasicModal
    @register="registerModal"
    title="查看详情"
    :showCancelBtn="false"
    @ok="closeModal"
    @open-change="change"
    width="60%"
  >
    <Spin :spinning="spinning">
      <Row style="width: 90%; margin: 0 auto 20px">
        <RadioGroup v-model:value="showType">
          <RadioButton value="list">汇总数据</RadioButton>
          <RadioButton value="table">检测数据</RadioButton>
        </RadioGroup>
        <Setting
          :list="list"
          v-model:checked="activeKeys"
          :defaultKeys="defaultKeys"
          v-if="showType === 'list'"
        />
      </Row>

      <!-- <Row> <Setting :list="list" v-model:checked="activeKeys" :defaultKeys="defaultKeys" /> </Row> -->
      <Row :gutter="[20, 20]" style="width: 90%; margin: auto; padding: 10px 0">
        <template v-if="showType === 'list'">
          <Col :span="8" v-for="(item, index) in renderList" :key="index">
            {{ item.title }}：<span style="color: #a3a3a3">{{ item.value || '-' }}</span>
          </Col>
        </template>

        <BasicTable @register="registerTable" v-show="showType === 'table'" />
      </Row>
    </Spin>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Spin, Row, Col, RadioGroup, RadioButton } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getWaterMeterByCode } from '/@/api/jd/water-box';
  import { CommonParam } from '../types';
  import Setting from './setting.vue';
  import { BasicTable, useTable } from '/@/components/Table';

  const spinning = ref<boolean>(true);

  const list = ref<CommonParam[]>([]);

  const showType = ref('list');

  const activeKeys = ref<number[]>([1, 14, 18, 19, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 38, 40]);

  const defaultKeys = ref([1, 14, 18, 19, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 38, 40]);
  const [registerTable, { setTableData, setColumns }] = useTable({
    pagination: false,
    canResize: true,
  });
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    const ret = await getWaterMeterByCode(data.waterMeterId);
    console.log('%c根据表记录ID查看数据=======', 'color:#eea;font-size:20px;font-weight:bold', ret);
    const totalTable = ret.totalTable;
    setColumns(ret.childTable.tableHead);
    setTableData(ret.childTable.tableData);

    list.value = [
      { id: 1, title: '水表表码', value: totalTable.waterMeterCode },
      { id: 2, title: '强检序号', value: totalTable.number },
      { id: 3, title: '送检单位', value: totalTable.firm },
      { id: 4, title: '生产厂家', value: totalTable.factory },
      { id: 5, title: '计量器具名称', value: totalTable.instrumentName },
      { id: 6, title: '表类型', value: totalTable.waterCodeType },
      { id: 7, title: '型号规格', value: totalTable.typeSpec },
      { id: 8, title: '口径', value: totalTable.caliberDn },
      { id: 9, title: '检定依据', value: totalTable.verifyingBasic },
      { id: 10, title: '标准装置', value: totalTable.standardDevice },
      { id: 11, title: '检定参数', value: totalTable.verifyingParam },
      { id: 12, title: '环境温度', value: totalTable.indoorTemperature },
      { id: 13, title: '相对湿度', value: totalTable.relativeHumidity },
      { id: 14, title: '检定日期', value: totalTable.checkDate },
      { id: 15, title: '有效期至', value: totalTable.validUntil },
      { id: 16, title: '电子装置功能判定', value: totalTable.transformTest },
      { id: 17, title: '密封性', value: totalTable.pressureTest },
      { id: 18, title: '示值误差判定', value: totalTable.indicationErrorResult },
      { id: 19, title: '检定结果', value: totalTable.result },
      { id: 20, title: '装置编号', value: totalTable.deviceNumber },
      { id: 21, title: '准确度等级', value: totalTable.accuracyClass },
      { id: 22, title: '水温', value: totalTable.pipeTemperature },
      { id: 23, title: '水压', value: totalTable.pipePressure },
      { id: 24, title: '脉冲当量', value: totalTable.pulseEquivalent },
      { id: 25, title: '密度', value: totalTable.density },
      { id: 26, title: '示值误差', value: totalTable.indicationError },
      { id: 27, title: '机电转换误差', value: totalTable.eleMechanialError },
      { id: 28, title: 'Q₁', value: totalTable.q1 },
      { id: 29, title: 'Q₂', value: totalTable.q2 },
      { id: 30, title: 'Q₃', value: totalTable.q3 },
      { id: 31, title: 'Q₄', value: totalTable.q4 },
      { id: 32, title: 'Q₂/Q₁', value: totalTable.q2q1 },
      { id: 33, title: 'Q₄/Q₃', value: totalTable.q4q3 },
      { id: 34, title: 'Q₃/Q₁', value: totalTable.q3q1 },
      { id: 35, title: '最大流量', value: totalTable.maxFlow },
      { id: 36, title: '最小流量', value: totalTable.minFlow },
      { id: 37, title: '常用流量', value: totalTable.commonFlow },
      { id: 38, title: '机电转换误差限', value: totalTable.eleMechanialErrorLimit },
      { id: 39, title: '复检', value: totalTable.recheck },
      { id: 40, title: '外观、标志和封印', value: totalTable.visualInspection },
      { id: 41, title: '数据描述', value: totalTable.dataSrc },
    ];
    spinning.value = false;
  });

  const change = (val) => {
    if (!val) {
      showType.value = 'list';
    }
  };

  const renderList = computed(() => list.value.filter((i) => activeKeys.value.includes(i.id)));
</script>

<style lang="less" scoped>
  :deep(.ant-table-body) {
    height: auto !important;
  }

  :deep(.ant-table-wrapper) {
    padding: 0 !important;
    margin: 0 !important;
  }

  :deep(.scrollbar) {
    padding-bottom: 30px;
  }
</style>
